/**
 * 此函数用于根据复选框的选中状态来控制确认按钮的可用性和背景颜色
 * @param {number} n - 用于计算相关输入元素索引的参数
 */
function tongyi(n) {
    // 获取id为main的元素下的所有input元素
    var input = document.getElementById("main").getElementsByTagName("input");
    // 检查第 n * 4 + 2 个input元素（复选框）是否被选中
    if (input[n * 4 + 2].checked) {
        // 如果选中，启用第 n * 4 + 3 个input元素（确认按钮）
        input[n * 4 + 3].disabled = false;
        // 设置确认按钮的背景颜色为 #ff6700
        input[n * 4 + 3].style.backgroundColor = "#ff6700";
    } else {
        // 如果未选中，禁用第 n * 4 + 3 个input元素（确认按钮）
        input[n * 4 + 3].disabled = true;
        // 设置确认按钮的背景颜色为 #FFBE99
        input[n * 4 + 3].style.backgroundColor = "#FFBE99";
    }
}

/**
 * 此函数用于切换登录和注册页面，并清空提示信息
 * @param {number} n - 页面编号，1 表示登录页面，2 表示注册页面
 */
function yemian(n) {
    // 获取id为main的元素下的所有button元素
    var button = document.getElementById("main").getElementsByTagName("button");
    // 设置当前点击的按钮的文字颜色为黑色
    button[n - 1].style.color = "#000000";
    // 设置当前点击的按钮的底部边框为 3px 宽的 #FF6700 颜色
    button[n - 1].style.borderBottom = "3px solid #FF6700";
    // 显示对应的页面（id为main加上页面编号）
    document.getElementById("main" + n).style.display = "block";
    // 设置另一个按钮的文字颜色为 #C5C5C5
    button[2 - n].style.color = "#C5C5C5";
    // 移除另一个按钮的底部边框
    button[2 - n].style.borderBottom = "none";
    // 隐藏另一个页面
    document.getElementById("main" + (3 - n)).style.display = "none";

    // 切换页面时清空提示信息
    document.getElementById('loginMessage').style.display = 'none';
    document.getElementById('registerMessage').style.display = 'none';
}

// 等待DOM加载完成后执行以下代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取全局提示元素
    var globalMessage = document.getElementById('globalMessage');

    // 登录按钮点击事件
    var loginBtn = document.querySelector('#main1 input.queding');
    if (loginBtn) {
        // 为登录按钮添加点击事件监听器
        loginBtn.addEventListener('click', function() {
            // 获取登录页面中输入的用户名
            var username = document.querySelector('#main1 input[type="text"]').value;
            // 获取登录页面中输入的密码
            var password = document.querySelector('#main1 input[type="password"]').value;

            // 检查用户名和密码是否都有输入
            if (username && password) {
                // 设置全局提示信息为登录成功
                globalMessage.textContent = '登录成功！';
                // 显示全局提示信息
                globalMessage.style.display = 'block';
                // 设置全局提示信息的背景颜色为绿色
                globalMessage.style.backgroundColor = '#4CAF50';
                // 设置全局提示信息的文字颜色为白色
                globalMessage.style.color = 'white';
                // 设置全局提示信息的内边距
                globalMessage.style.padding = '10px 20px';
                // 设置全局提示信息的边框圆角
                globalMessage.style.borderRadius = '4px';
                // 设置全局提示信息的阴影效果
                globalMessage.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';

                // 3秒后自动隐藏提示并跳转到 index.html 页面
                setTimeout(function() {
                    globalMessage.style.display = 'none';
                    window.location.href = 'index.html';
                }, 1500);
            }
        });
    }

    // 注册按钮点击事件
    var registerBtn = document.querySelector('#main2 input.queding');
    if (registerBtn) {
        // 为注册按钮添加点击事件监听器
        registerBtn.addEventListener('click', function() {
            // 获取注册页面中输入的邮箱或手机号
            var emailPhone = document.querySelector('#main2 input[type="text"]').value;
            // 获取注册页面中输入的验证码
            var code = document.querySelector('#main2 input[type="password"]').value;

            // 检查邮箱或手机号和验证码是否都有输入
            if (emailPhone && code) {
                // 设置全局提示信息为注册成功
                globalMessage.textContent = '注册成功！';
                // 显示全局提示信息
                globalMessage.style.display = 'block';
                // 设置全局提示信息的背景颜色为绿色
                globalMessage.style.backgroundColor = '#4CAF50';
                // 设置全局提示信息的文字颜色为白色
                globalMessage.style.color = 'white';
                // 设置全局提示信息的内边距
                globalMessage.style.padding = '10px 20px';
                // 设置全局提示信息的边框圆角
                globalMessage.style.borderRadius = '4px';
                // 设置全局提示信息的阴影效果
                globalMessage.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';

                // 3秒后自动隐藏提示并切换到登录页面
                setTimeout(function() {
                    globalMessage.style.display = 'none';
                    yemian(1);
                }, 1500);
            }
        });
    }
});